<template>
  <div class="page-content">
    <div class="page-title">
      <span class="page-title-front">安全</span><span class="page-title-des">对您的入方向与出方向安全组进行管理</span>
    </div>
    <div class="page-main">
      <div class="page-main-operation">
        <span class="select-name">云服务器名称 :</span>
        <a-select v-model="serverValue" class="table-select" @change="serverValueHandle">
          <a-select-option v-for="item in serverList" :key="item.value" :value="item.value">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </div>
      <div class="page-main-content">
        <security-table
          :list="securityListTemp"
          :type="directionType"
          :loading="loading"
          :pagination="pagination"
          @changeType="changeDirectionType"
          @changePagination="changePagination"
          @manageSecurity="manageSecurity"
        />
      </div>
      <security-modify :visible.sync="visibleModify" :record="record" />
    </div>
  </div>
</template>

<script>
import { serverHostCondition, safeStrategyPage } from '@/api/Console/Security'
import SecurityTable from '@/components/Console/Security/SecurityTable'
import SecurityModify from '@/components/Console/Security/SecurityModify'
export default {
  name: 'Security',
  components: {
    SecurityTable,
    SecurityModify
  },
  data() {
    return {
      serverValue: null, // 服务器id
      serverList: [],
      securityList: [],
      securityListTemp: [],
      directionType: 'IN', // 进出方向
      loading: false,
      pagination: {
        current: 1, // 当前页
        pageSize: 10, // 每页显示条数
        total: 0,
        pageSizeOptions: ['10', '20', '30', '40'],
        showSizeChanger: true, // 改变页面条数
        showQuickJumper: true // 跳页
      },
      visibleModify: false, // 修改、新增的弹框
      record: null
    }
  },
  watch: {
    securityList: function(newValue, oldvalue) {
      console.log(oldvalue, newValue)
      const list = newValue
      list.forEach((item, index, arr) => {
        arr[index].port = '目的：' + item.portStart + ':' + item.portEnd
      })
      this.securityListTemp = list
    }
  },
  mounted() {
    this.getServerHostCondition()
    this.getSecurityList()
  },
  methods: {
    // 条件页查询云服务器
    // params: serverType 通用云服务器：1，GPU云服务器：2，不传全查
    getServerHostCondition() {
      serverHostCondition()
        .then(res => {
          const list = res.data.rows || []
          const result = []
          result.push()
          if (!list || list.length === 0) {
            return
          }
          for (let i = 0; i < list.length; i++) {
            const item = list[i]
            result.push({ key: item.id.toString() + i, name: item.serverName, value: item.id })
          }
          this.serverList = this.serverList.concat(result)
          if (this.serverList.length > 0) {
            this.serverValue = this.serverList[0].value
          }
        })
        .catch(e => {
          this.$message.error('服务器列表请求失败，请联系管理员', 2)
          console.log(e)
        })
    },
    // 查询安全策略列表
    /** type	string	否	-	方向 OUT;IN
     * serverHostId	int	否	-	服务器id
     * pageNum	int	是	-	页码
     * pageSize	int	是	-	大小
     */
    getSecurityList() {
      this.loading = true
      const obj = {}
      obj.type = this.directionType
      if (this.serverValue === null || this.serverValue === undefined) {
        this.loading = false
        return
      } else {
        obj.serverHostId = this.serverValue
      }
      obj.page = this.pagination.current
      obj.limit = this.pagination.pageSize
      safeStrategyPage(obj)
        .then(res => {
          this.loading = false
          if (res && res.data) {
            this.securityList = res.data.rows || []
            this.pagination.total = res.data.totoal || 0
          } else {
            this.securityList = []
            this.pagination.total = 0
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.error('安全策略列表请求失败，请联系管理员', 2)
          console.log(e)
        })
    },
    serverValueHandle(value) {
      this.serverValue = value
      this.getSecurityList()
    },
    // 子组件的出入方向
    changeDirectionType(value) {
      this.directionType = value
      this.getSecurityList()
    },
    // 分页查询
    changePagination(value) {
      this.pagination = { ...value }
      this.getSecurityList()
    },
    // 新增或者新建安全策略
    manageSecurity(value) {
      this.record = value
      this.visibleModify = true
    }
  }
}
</script>

<style scoped lang="less">
.page-content {
  width: 100%;
  min-width: 1238px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  .page-title {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #ffffff;
    padding-left: 30px;
    margin-top: 14px;
    margin-bottom: 6px;
    .page-title-front {
      font-size: 16px;
      color: #333;
      margin-right: 20px;
    }
    .page-title-des {
      font-size: 14px;
      color: #333;
    }
  }
  .page-main {
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 30px;
    .page-main-operation {
      display: flex;
      height: 30px;
      line-height: 30px;
      .select-name {
        margin-right: 10px;
        font-size: 14px;
        color: #333333;
      }
      .table-select {
        width: 160px;
        height: 30px;
        border-radius: 2px;
        border: solid 1px #e1e5ee;
      }
      /deep/.ant-input-affix-wrapper .ant-input-suffix {
        right: 0;
      }
    }
    .page-main-content {
      width: 100%;
      margin-top: 10px;
    }
  }
}
</style>
